<template>
  <div class="content">
    <div :id="video.Id"></div>
    <div class="tools">
      <div class="tool-item" @click="clickLove(video.IsLove)">
        <img
          src="../assets/images/active-love.png"
          alt=""
          class="l"
          v-if="video.IsLove"
        />
        <img src="../assets/images/love.png" alt="" class="l" v-else />

        <div class="num">{{ video.LoveNum }}</div>
      </div>
      <div class="tool-item" @click="clickCollect(video.IsCollet)">
        <img src="../assets/images/active-collect.png" v-if="video.IsCollet" />
        <img src="../assets/images/collect.png" alt="" v-else />
        <div class="num">{{ video.CollectNum }}</div>
      </div>
      <div class="tool-item" @click="clickShare(video.Url)">
        <img src="../assets/images/share.png" alt="" class="l" />
        <div class="num">{{ video.ShareNum }}</div>
      </div>
    </div>
  </div>
</template>
  <script>
import Player from "xgplayer";
import "xgplayer/dist/index.min.css";
import { getId } from "@/utils/auth";
import api from "@api/index";
export default {
  props: ["video"],
  data() {
    return {
      player: null, //实例
      isLogin: false,
    };
  },
  mounted() {
    if (getId()) {
      this.isLogin = true;
    }
    console.log("传过来的url:", this.video.Url);
    // 初始化播放器
    this.initPlayer(this.video.Id, this.video.Url);
  },
  created() {},
  // 监听播放路径的变化
  watch: {
    url: {
      handler(val, old) {
        console.log(val);
        // this.$forceUpdate(newValue)
        if (!this.player) {
          this.initPlayer(val.Id, val.Url);
          return;
        }
        this.player.src = val.Url;
      },
    },
  },
  methods: {
    // =========================1，设置播放器必要参数===================
    initPlayer(id, url) {
      if (!url) return console.warn("url is not esist");
      const config = {
        id: id,
        url: url,
        fluid: true,

        /**倍速播放 */
        playbackRate: [0.5, 0.75, 1, 1.5, 2, 5],
        defaultPlaybackRate: 1,

        playsinline: this.isAppleDevice(), // IOS设备设置，防止被浏览器劫持
        "x5-video-player-type": "h5", // 微信内置浏览器设置，防止被浏览器劫持
        "x5-video-orientation": "portraint",
        /**画中画 */
        pip: true,
        pipConfig: {
          bottom: 100,
          right: 100,
          width: 320,
          height: 180,
        },
        // download: true,
        /**初始化首帧 */
        videoInit: true,
        // autoplay: true,
        // autoplayMuted: true,
      };
      //========================== 2，开始实例化======================
      const player = new Player(config);

      if (player) {
        this.player = player;
        /* 这里注册监听 */
        // 监听视频开始播放 播放传给父组件的是true
        this.player.on("play", () => {
          this.$emit("triggerEvent", true);
        });
        // 监听视频已经暂停 暂停传给父组件的是true
        this.player.on("pause", () => {
          this.$emit("triggerEvent", false);
        });
        // 监听 视频退出全屏
        // this.player.on('exitFullscreen', () => {
        //   window.scrollTo(0, 0);
        //   console.log('已经退出全屏了');
        // });
      }
    },
    // IOS设备设置，防止被浏览器劫持
    isAppleDevice() {
      const ua = navigator.userAgent.toLowerCase();
      return /iphone|ipad|phone|Mac/i.test(ua);
    },
    clickLove(flag) {
      if (!this.isLogin) {
        this.$confirm("您还未登录！", "提示", {
          confirmButtonText: "去登录",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.$router.push({ path: "/Login" });
          })
          .catch(() => {
            //点击取消弹窗
            this.$message({
              type: "info",
              message: "已取消",
            });
          });
      } else {
        if (flag) {
          var data = {
            uid: getId(), //用户ID
            vid: this.video.Id, //视频ID
          };
          api.cancelLove(data).then(
            (res) => {
              console.log(res);
              this.video.IsLove = !flag;
              this.video.LoveNum--;
            },
            (err) => {
              console.log(err);
            }
          );
        } else {
          var data = {
            uid: getId(), //用户ID
            vid: this.video.Id, //视频ID
          };
          api.handleLove(data).then(
            (res) => {
              console.log(res);
              this.video.IsLove = !flag;
              this.video.LoveNum++;
            },
            (err) => {
              console.log(err);
            }
          );
        }
      }
    },
    clickCollect(flag) {
      if (!this.isLogin) {
        this.$confirm("您还未登录！", "提示", {
          confirmButtonText: "去登录",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.$router.push({ path: "/Login" });
          })
          .catch(() => {
            //点击取消弹窗
            this.$message({
              type: "info",
              message: "已取消",
            });
          });
      } else {
        if (flag) {
          var data = {
            uid: getId(), //用户ID
            vid: this.video.Id, //视频ID
          };
          api.cancelCollect(data).then(
            (res) => {
              console.log(res);
              this.video.IsCollet = !flag;
              this.video.CollectNum--;
            },
            (err) => {
              console.log(err);
            }
          );
        } else {
          var data = {
            uid: getId(), //用户ID
            vid: this.video.Id, //视频ID
          };
          api.handleCollect(data).then(
            (res) => {
              console.log(res);
              this.video.IsCollet = !flag;
              this.video.CollectNum++;
            },
            (err) => {
              console.log(err);
            }
          );
        }
      }
    },
    clickShare(url) {
      var data = {
        vid: this.video.Id,
      };
      api.handleShare(data).then(
        (res) => {
          console.log(res);
          var input = document.createElement("input"); // 创建input对象
          input.value = url; // 设置复制内容
          document.body.appendChild(input); // 添加临时实例
          input.select(); // 选择实例内容
          document.execCommand("Copy"); // 执行复制
          document.body.removeChild(input); // 删除临时实例
          this.$message.success("视频链接复制成功，快去分享给好友吧！！");
          this.video.ShareNum++;
        },
        (err) => {
          console.log(err.response.data.code);
          // if (err.response.data.code === 429) {
          //   this.$notify({
          //     title: "请求过于频繁！",
          //     type: "warning",
          //     //存在时间
          //     duration: 6000,
          //   });
          // }
        }
      );
    },
  },
};
</script>
  
  <style scoped>
.content {
  padding: 0 60px;
  /* background-color: rgba(225, 225, 225, 0.5); */
  background-color: #000000;
  border-radius: 15px;
  position: relative;
}
.tools {
  position: absolute;
  bottom: 40px;
  right: 10px;
  width: 40px;
  color: #fff;
  /* background-color: red; */
}
.tool-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}
.num {
  margin: 10px 0;
}
img {
  width: 80%;
}
.l {
  width: 60%;
}
</style>
  
  